<template>
  <div class="demo" id="el_id">
    <nut-row>
      <nut-col :span="24">
        <div class="flex-content">span:24</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="12">
        <div class="flex-content">span:12</div>
      </nut-col>
      <nut-col :span="12">
        <div class="flex-content flex-content-light">span:12</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="8">
        <div class="flex-content">span:8</div>
      </nut-col>
      <nut-col :span="8">
        <div class="flex-content flex-content-light">span:8</div>
      </nut-col>
      <nut-col :span="8">
        <div class="flex-content">span:8</div>
      </nut-col>
    </nut-row>
    <nut-row>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row :gutter="10">
      <nut-col :span="8">
        <div class="flex-content">span:8</div>
      </nut-col>
      <nut-col :span="8">
        <div class="flex-content flex-content-light">span:8</div>
      </nut-col>
      <nut-col :span="8">
        <div class="flex-content">span:8</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" wrap="nowrap">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" justify="center">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" justify="end">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" justify="space-between">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" justify="space-around">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <nut-row type="flex" justify="space-evenly">
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
      </nut-col>
      <nut-col :span="6">
        <div class="flex-content">span:6</div>
      </nut-col>
    </nut-row>
    <h2>Custom test</h2>
    <nut-row>
      <nut-col :span="12">
        <div class="flex-content">span:12</div>
        <nut-col :span="12">
          <div class="flex-content flex-content-light">span:12</div>
        </nut-col>
      </nut-col>
      <nut-col :span="24">
        <div class="flex-content flex-content-light">span:24</div>
      </nut-col>
      <nut-col :span="12">
        <div class="flex-content flex-content-light">span:10</div>
        <nut-row type="flex" justify="space-evenly">
          <div class="flex-content">
            <span>row</span>
          </div>
          <nut-col class="flex-content" :span="12">col:12</nut-col>
        </nut-row>
      </nut-col>
    </nut-row>
    <nut-backtop :distance="100" :bottom="110" el-id="el_id">
      <view class="backtop-demo">
        <Top width="12px" height="12px" class="nut-backtop-main"></Top
        ><view class="title">test</view>
      </view>
    </nut-backtop>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Top } from "@nutui/icons-vue";
</script>
<style lang="scss" scoped>
.demo {
  padding: 10px;
}
.nut-row {
  overflow: hidden;
  &:not(:last-child) .nut-col {
    margin-bottom: 15px;
  }
  margin-bottom: 15px;
}
.flex-content {
  line-height: 40px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  background: #ff8881;
  &.flex-content-light {
    background: #ffc7c4;
  }
  &.flex-content-height {
    height: 50px;
  }
}
</style>
